<template>
	<view class="container">

		<!-- 提示文字 -->
		<view class="tip">
			<u-icon name="warning" size="32" color="#f9ae3d" style="margin-right: 10rpx;"></u-icon>
			<text>请确保已完成前期准备，以便提高报告的精准性</text>
		</view>

		<!-- 上传区域 - 修改为可显示上传的图片 -->
		<view class="upload-area" @click="handleUpload">
			<image v-if="imageUrl" :src="imageUrl" mode="aspectFit" class="preview-image"></image>
			<template v-else>
				<u-icon name="plus" size="40" color="#999"></u-icon>
				<text class="upload-text">请上传作品</text>
			</template>
		</view>

		<!-- 分析按钮 -->
		<view class="btn-container">
			<u-button type="primary" shape="circle" @click="handleAnalyze" :disabled="!imageUrl">
				立即分析
			</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '', // 存储显示的图片URL
				aiUrl: '',
				usedTime: null,
				query: `你是一位优秀的心理专家，这是一个小孩子自己画的画，请你根据这个画画作品给我一个对这个小孩子的心理评价和对应的情绪分数，要给予他积极的情绪反馈，你需要返回给我一个["72","31","56","66","42","83"]这样的数组，这几个数据是对['高兴','充实','伤心','孤独','迷茫','纠结']这几个情绪的评分，总分一百分，然后在给我对这个女孩的情绪评价，例如："这张画看起来充满童真和欢乐，她可能在此时节心情愉悦，因为画面具有新生命、希望和追求。"`,
			}
		},
		onLoad() {
			// 监听页面加载，检查是否有从page1返回的图片路径
			const pages = getCurrentPages();
			if (pages.length > 1) {
				const prevPage = pages[pages.length - 2];
				this.imageUrl = prevPage.$vm.imageUrl || '';
				this.aiUrl = prevPage.$vm.aiUrl || '';
				this.usedTime = prevPage.$vm.usedTime || null;
			}

		},

		methods: {
			
			handleUpload() {
				uni.navigateTo({
					url: '/pages/psychologyModel/drawingAnalysis/drawing/drawHouse',
					success: (res) => {
						// 这里可以在跳转成功时做一些操作，目前无需特别处理
					}
				});
			},
			handleAnalyze() {
				if (!this.imageUrl) {
					uni.showToast({
						title: '请先上传作品',
						icon: 'none'
					});
					return;
				}

				console.log(this.imageUrl)
				console.log(this.aiUrl)
				console.log(this.usedTime)


				uni.navigateTo({
					url: '/pages/psychologyModel/drawingAnalysis/drawing/drawingResult',
					success: (res) => {
						// 通过 eventChannel 向目标页面传参
						res.eventChannel.emit('result', {
							aiUrl: this.aiUrl,
							usedTime: this.usedTime,
							query: this.query
						});
					}
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	// 新增样式变量系统
	$theme-map: (
		primary: #2979ff,
		warning: #f9ae3d,
		success: #19be6b,
		text-primary: #333,
		text-secondary: #666,
		border-base: #e4e7ed,
		background-light: #f8f8f8
	);

	// 混合宏库
	@mixin flex-center($direction: row) {
		display: flex;
		flex-direction: $direction;
		justify-content: center;
		align-items: center;
	}

	@mixin hover-effect($opacity: 0.8) {
		transition: opacity 0.2s;

		&:active {
			opacity: $opacity;
		}
	}

	// 主容器优化
	.container {
		background-color: #fff;
		min-height: 100vh;
		@include flex-center(column);
		padding: 0 30rpx;
	}

	// 导航栏重构
	.custom-nav-bar {
		padding: 20rpx 0;
		background-color: map-get($theme-map, background-light);
		width: 100%;

		.title-container {
			@include flex-center(column);
			line-height: 1.4;

			.title {
				font: {
					size: 36rpx;
					weight: 600;
				}

				color: map-get($theme-map, text-primary);
			}

			.subtitle {
				font-size: 28rpx;
				color: map-get($theme-map, text-secondary);
			}
		}
	}

	// 提示信息组件化
	.tip {
		@include flex-center;
		padding: 24rpx;
		margin: 30rpx 0;
		background-color: rgba(map-get($theme-map, warning), 0.1);
		border-radius: 16rpx;
		color: map-get($theme-map, text-secondary);
		font-size: 28rpx;

		.u-icon {
			margin-right: 16rpx;
			flex-shrink: 0;
		}
	}

	// 上传区域交互增强
	.upload-area {
		@include flex-center(column);
		width: 100%;
		height: 70vh;
		max-height: 800rpx;
		border: 2rpx dashed map-get($theme-map, border-base);
		border-radius: 24rpx;
		background-color: rgba(map-get($theme-map, background-light), 0.6);
		overflow: hidden;
		position: relative;
		@include hover-effect;

		&::after {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: inherit;
			pointer-events: none;
		}

		&:active::after {
			background-color: rgba(0, 0, 0, 0.03);
		}

		.preview-image {
			width: 100%;
			height: 100%;
			object-fit: contain;
			transition: transform 0.3s ease;
		}

		.upload-text {
			margin-top: 24rpx;
			font-size: 30rpx;
			color: map-get($theme-map, text-secondary);
		}
	}

	// 按钮系统优化
	.btn-container {
		margin: 60rpx 0;
		width: 100%;

		.u-button {
			font-weight: 500;
			letter-spacing: 2rpx;
			box-shadow: 0 4rpx 16rpx rgba(map-get($theme-map, primary), 0.2);
			transition: all 0.2s;

			&[disabled] {
				opacity: 0.6;
				box-shadow: none;
			}

			&:not([disabled]):active {
				transform: translateY(2rpx);
				box-shadow: 0 2rpx 8rpx rgba(map-get($theme-map, primary), 0.2);
			}
		}
	}

	// 新增媒体查询适配
	@media (min-width: 768px) {
		.container {
			max-width: 750px;
			margin: 0 auto;
		}

		.upload-area {
			max-height: 60vh;
		}
	}
</style>